import React from 'react'
import { connect } from 'dva'
import { mapStateToProps } from 'utils/view_utils'
import { CollapsiblePanels } from 'widget/CollapsiblePanels/index'
import PopUpSelect from 'widget/PopUpSelectnoModal/PopUpSelect'
import { isEmpty, cloneDeep, } from 'lodash'
import cx from 'classnames'
import Uploader from 'widget/Upload'
import locale from 'antd/lib/date-picker/locale/zh_CN';
import { Form, Input, Select, Checkbox , Row, Col, Button, DatePicker, Radio  } from 'antd';
// import { message,DatePicker} from 'antd';
import moment from 'moment';
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
import 'moment/locale/zh-cn';
import { number } from 'prop-types'
moment.locale('zh-cn');
const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const { Option } = Select
const routeView = function ({ dispatch, model, form }) {
    const { modelObj, namespace } = model
    const { getFieldDecorator } = form
    let { title, type, query, detail, actionType, images, outerImage, houseTypeImage, devices } = modelObj
    //console.log('selectItem',selectItem)
    // PopUpSelect 需要row配置
    const formItemLayout = {
        labelCol: {
            span: 1,

        },
        wrapperCol: {
            span: 16
        },
    }
    const imageLayout = {
        labelCol: { span: 2 },
        wrapperCol: { span: 22 },
    }
    function removeImgUrl(inx, origin){
        if(origin == 'images'){
            images.splice(inx ,1)
            dispatch({
                type: `${namespace}/updateStore`,
                payload: { images }
            })
        }else if(origin == 'houseTypeImage'){
            houseTypeImage.splice(inx ,1)
            dispatch({
                type: `${namespace}/updateStore`,
                payload: { houseTypeImage }
            })
        }else if(origin == 'outerImage'){
            outerImage.splice(inx ,1)
            dispatch({
                type: `${namespace}/updateStore`,
                payload: { outerImage }
            })
        }
    }
    function updateImageModel(url, origin){
        if(origin == 'images'){
            images.push(url)
            dispatch({
                type: `${namespace}/updateStore`,
                payload: { images }
            })
        }else if(origin == 'houseTypeImage'){
            houseTypeImage.push(url)
            dispatch({
                type: `${namespace}/updateStore`,
                payload: { houseTypeImage }
            })
        }else if(origin == 'outerImage'){
            outerImage.push(url)
            dispatch({
                type: `${namespace}/updateStore`,
                payload: { outerImage }
            })
        }
    }

    function updateKey(value, key){
        dispatch({
            type: `${namespace}/updateStore`,
            payload: { key: value}
        })
    }

    function updateModel(value, key, obj){
        detail[key] = value
        dispatch({
            type: `${namespace}/updateStore`,
            payload: { detail }
        })
    }
    //选择角色

    //date改变时
    return (
        <div className={cx('public_listMain')}>
            <div className="functionButton">
                {actionType == 'check' ? (<Button type='primary' loading={modelObj.btnLoading} onClick={() => {
                    if(type == 1){
                        hashHistory.push('/home/buildingAdmin/publicRent')
                      }else if(type == 2){
                        hashHistory.push('/home/buildingAdmin/protectRent')
                      }else if(type == 3){
                        hashHistory.push('/home/buildingAdmin/tenantRent')
                      }else{
                        hashHistory.push({
                            pathname: '/home/buildingAdmin/forRent',
                            query: { }
                          });
                      }
                    
                    
                }} >返回</Button>): <Button type='primary' loading={modelObj.btnLoading} onClick={() => {
                    form.validateFields((err) => {
                        if(!err){
                            detail.type = type
                            dispatch({
                                type: `${namespace}/update`,
                                payload: {detail}
                            })
                        }
                    });

                }} >保存</Button> }
            </div>
            <CollapsiblePanels title={title} hideUpDownBtn={true}  >
                <Form autoComplete="off" className="auto-wrap" >

                    <Row style={{ borderBottom: "1px solid #EFF0F2" }}>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="小区名称" labelCol={{ span: 5 }}>
                                <div>
                                    {getFieldDecorator('name', {
                                        initialValue: detail.name,
                                        rules: [
                                            { required: true, whitespace: true, message: '请输入小区名称' },
                                        ],
                                        })(<Input
                                        placeholder={'请输入小区名称'}
                                        autoComplete={'off'}
                                        disabled={actionType == 'check'}
                                        maxLength={50}
                                        onChange={(e) => { updateModel(e.target.value, 'name', 'detail') }}
                                    />)}
                                </div>
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="小区地址" labelCol={{ span: 5 }}>
                                <div>
                                    {getFieldDecorator('address', {
                                        initialValue: detail.address,
                                        rules: [
                                            { required: true, whitespace: true, message: '请输入小区地址' },
                                        ],
                                        })(<Input
                                        placeholder={'请输入小区地址'}
                                        autoComplete={'off'}
                                        disabled={actionType == 'check'}
                                        maxLength={100}
                                        onChange={(e) => { updateModel(e.target.value, 'address', 'detail') }}
                                    />)}
                                </div>
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="户型" labelCol={{ span: 5 }} >
                                <div className={cx('select-item-contain')}>
                                    {getFieldDecorator('houseHold', {
                                        initialValue: detail.houseType,
                                        rules: [
                                            { required: true, whitespace: true, message: '请输入户型' },
                                        ],
                                        })(<Input
                                        placeholder={'请输入户型'}
                                        disabled={actionType == 'check'}
                                        autoComplete={'off'}
                                        onChange={(e) => { updateModel(e.target.value, 'houseType', 'detail') }}
                                    />)}
                                </div>
                            </FormItem>
                        </Col>
                    </Row>
                    {}
                    <Row style={{ borderBottom: "1px solid #EFF0F2" }}>

                        <Col span={8}>
                            <FormItem {...formItemLayout} label="楼栋" labelCol={{ span: 5 }} >
                                <div className={cx('select-item-contain')}>
                                    {getFieldDecorator('building', {
                                        initialValue: detail.building,
                                        rules: [
                                            { required: false, whitespace: true, message: '请输入楼栋' },
                                        ],
                                        })(<Input
                                        placeholder={'请输入楼栋'}
                                        autoComplete={'off'}
                                        disabled={actionType == 'check'}
                                        type="number"
                                        onChange={(e) => { updateModel(e.target.value, 'building', 'detail') }}
                                    />)}
                                </div>
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="单元" labelCol={{ span: 5 }}>
                                <div className={cx('select-item-contain')}>
                                    {getFieldDecorator('unit', {
                                        initialValue: detail.unit,
                                        rules: [
                                            { required: false, whitespace: true, message: '请输入单元' },
                                        ],
                                        })(<Input
                                        placeholder={'请输入单元'}
                                        disabled={actionType == 'check'}
                                        autoComplete={'off'}
                                        type="number"
                                        onChange={(e) => { updateModel(e.target.value, 'unit', 'detail') }}
                                    />)}
                                </div>
                            </FormItem>
                        </Col>

                    </Row>
                    <Row style={{ borderBottom: "1px solid #EFF0F2" }}>

                        <Col span={8}>
                            <FormItem {...formItemLayout} label="建筑面积" labelCol={{ span: 5 }}>
                                <div className={cx('select-item-contain')}>
                                    {getFieldDecorator('area', {
                                        initialValue: detail.area  + '',
                                        rules: [
                                            { required: true, whitespace: true, message: '请输入建筑面积' },
                                        ],
                                        })(<Input
                                        placeholder={'请输入建筑面积'}
                                        disabled={actionType == 'check'}
                                        autoComplete={'off'}
                                        type="number"
                                        onChange={(e) => { updateModel(e.target.value, 'area', 'detail') }}
                                    />)}
                                </div>
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="套内面积" labelCol={{ span: 5 }} >
                                <div className={cx('select-item-contain')}>
                                    {getFieldDecorator('innerArea', {
                                        initialValue: detail.innerArea + '',
                                        rules: [
                                            { required: true, whitespace: true, message: '请输入套内面积' },
                                        ],
                                        })(<Input
                                        placeholder={'请输入套内面积'}
                                        autoComplete={'off'}
                                        disabled={actionType == 'check'}
                                        type="number"
                                        onChange={(e) => { updateModel(e.target.value, 'innerArea', 'detail') }}
                                    />)}
                                </div>
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="楼层" labelCol={{ span: 5 }}>
                                <div className={cx('select-item-contain')}>
                                    {getFieldDecorator('floor', {
                                        initialValue: detail.floor,
                                        rules: [
                                            { required: true, whitespace: true, message: '请输入楼层' },
                                        ],
                                        })(<Input
                                        placeholder={'请输入楼层'}
                                        disabled={actionType == 'check'}
                                        autoComplete={'off'}
                                        type="number"
                                        onChange={(e) => { updateModel(e.target.value, 'floor', 'detail') }}
                                    />)}
                                </div>
                            </FormItem>
                        </Col>

                    </Row>
                    <Row style={{ borderBottom: "1px solid #EFF0F2" }}>

                        <Col span={8}>
                            <FormItem {...formItemLayout} label="朝向" labelCol={{ span: 5 }} >
                                <div className={cx('select-item-contain')}>
                                    {getFieldDecorator('direction', {
                                        initialValue: detail.direction,
                                        rules: [
                                            { required: true, whitespace: true, message: '请选择朝向' },
                                        ],
                                        })(<Radio.Group  value={detail.direction} disabled={actionType == 'check'} onChange={(e) => { updateModel(e.target.value, 'direction', 'detail') }}>
                                            <Radio value={"0"}>东</Radio>
                                            <Radio value={"1"}>南</Radio>
                                            <Radio value={"2"}>西</Radio>
                                            <Radio value={"4"}>北</Radio>
                                          </Radio.Group>)}
                                </div>
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="装修情况" labelCol={{ span: 5 }}>
                                <div className={cx('select-item-contain')}>
                                    {getFieldDecorator('decoration', {
                                        initialValue: detail.decoration + '',
                                        rules: [
                                            { required: true, whitespace: true, message: '请选择装修情况' },
                                        ],
                                        })(<Radio.Group value={detail.decoration} disabled={actionType == 'check'} onChange={(e) => { updateModel(e.target.value, 'decoration', 'detail') }}>
                                            <Radio value={'0'}>毛坯</Radio>
                                            <Radio value={'1'}>简装</Radio>
                                            <Radio value={'2'}>精装</Radio>
                                          </Radio.Group>)}
                                </div>
                            </FormItem>
                        </Col>

                    </Row>
                    <Row style={{ borderBottom: "1px solid #EFF0F2" }}>

                        <Col span={8}>
                            <FormItem {...formItemLayout} label="电梯" labelCol={{ span: 5 }}>
                                <div className={cx('select-item-contain')}>
                                    {getFieldDecorator('elevator', {
                                        initialValue: detail.elevator + '',
                                        rules: [
                                            { required: true, whitespace: true, message: '请选择装修情况' },
                                        ],
                                        })(<Radio.Group  value={detail.elevator} disabled={actionType == 'check'} onChange={(e) => { updateModel(e.target.value, 'elevator', 'detail') }}>
                                            <Radio value={'0'}>无</Radio>
                                            <Radio value={'1'}>有</Radio>
                                            </Radio.Group>)}
                                </div>
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="房屋类型" labelCol={{ span: 5 }}>
                                    <div className={cx('select-item-contain')}>
                                        {getFieldDecorator('propertyType', {
                                            initialValue: detail.propertyType + '',
                                            rules: [
                                                { required: true, whitespace: true, message: '请选择房屋类型' },
                                            ],
                                            })(<Radio.Group value={detail.propertyType} disabled={actionType == 'check'} onChange={(e) => { updateModel(e.target.value, 'propertyType', 'detail') }}>
                                                <Radio value={'0'}>普通住宅</Radio>
                                                <Radio value={'1'}>公寓</Radio>
                                                <Radio value={'2'}>别墅</Radio>
                                                <Radio value={'3'}>平房</Radio>
                                                <Radio value={'4'}>商住房</Radio>
                                                <Radio value={'5'}>其他</Radio>
                                                </Radio.Group>)}
                                    </div>
                            </FormItem>
                        </Col>

                    </Row>
                    <Row style={{ borderBottom: "1px solid #EFF0F2" }}>
                       { type == 1 || type ===2 ? null:(
                            <Col span={8}>
                                <FormItem {...formItemLayout} label="付款方式" labelCol={{ span: 5 }}>
                                    <div className={cx('select-item-contain')}>
                                        {getFieldDecorator('payType', {
                                            initialValue: detail.payType,
                                            rules: [
                                                { required: true, whitespace: true, message: '请选择装修情况' },
                                            ],
                                            })(<Radio.Group  value={detail.payType} disabled={actionType == 'check'}  onChange={(e) => { updateModel(e.target.value, 'payType', 'detail') }}>
                                                <Radio value={'0'}>月付</Radio>
                                                <Radio value={'1'}>季付</Radio>
                                                <Radio value={'2'}>年付</Radio>
                                                </Radio.Group>)}
                                    </div>
                                </FormItem>
                            </Col>
                       )}
                        
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="租赁方式" labelCol={{ span: 5 }}>
                                    <div className={cx('select-item-contain')}>
                                        {getFieldDecorator('rentType', {
                                            initialValue: detail.rentType + '',
                                            rules: [
                                                { required: false, whitespace: true, message: '请选择房屋类型' },
                                            ],
                                            })(<Radio.Group value={detail.rentType} disabled={actionType == 'check'} onChange={(e) => { updateModel(e.target.value, 'rentType', 'detail') }}>
                                                <Radio value={'0'}>整租</Radio>
                                                <Radio value={'1'}>合租</Radio>
                                                </Radio.Group>)}
                                    </div>
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="房屋设施" labelCol={{ span: 5 }}>
                                    <div className={cx('select-item-contain')}>
                                        {getFieldDecorator('devices', {
                                            initialValue: detail.devices,
                                            })(<Checkbox.Group value={detail.devices} disabled={actionType == 'check'} onChange={(e) => { updateModel(e, 'devices', 'detail') }}>
                                                <Checkbox value={'0'}>宽带</Checkbox>
                                                <Checkbox value={'1'}>冰箱</Checkbox>
                                                <Checkbox value={'2'}>电视</Checkbox>
                                                <Checkbox value={'3'}>洗衣机</Checkbox>
                                                <Checkbox value={'4'}>空调</Checkbox>
                                                <Checkbox value={'5'}>暖气</Checkbox>
                                                <Checkbox value={'6'}>天然气</Checkbox>
                                                <Checkbox value={'7'}>油烟机</Checkbox>
                                                <Checkbox value={'8'}>热水器</Checkbox>
                                                <Checkbox value={'9'}>床</Checkbox>
                                                <Checkbox value={'10'}>衣柜</Checkbox>
                                                <Checkbox value={'11'}>沙发</Checkbox>
                                                <Checkbox value={'13'}>桌子</Checkbox>
                                                <Checkbox value={'14'}>风扇</Checkbox>
                                                <Checkbox value={'15'}>阳台</Checkbox>
                                                <Checkbox value={'16'}>智能门锁</Checkbox>
                                                <Checkbox value={'17'}>可做饭</Checkbox>

                                                </Checkbox.Group>)}
                                    </div>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row style={{ borderBottom: "1px solid #EFF0F2" }}>

                        <Col span={8}>
                            <FormItem {...formItemLayout} label="期望租金" labelCol={{ span: 5 }} >
                                <div className={cx('select-item-contain')}>
                                    {getFieldDecorator('pirce', {
                                        initialValue: detail.price,
                                        rules: [
                                            { required: type != 1 && type != 2, whitespace: true, message: '请输入租金' },
                                        ],
                                        })(<Input
                                        placeholder={'请输入租金'}
                                        autoComplete={'off'}
                                        disabled={actionType == 'check'}
                                        type="number"
                                        onChange={(e) => { updateModel(e.target.value, 'price', 'detail') }}
                                    />)}
                                </div>
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="房屋介绍" labelCol={{ span: 5 }}>
                                <div className={cx('select-item-contain')}>
                                    {getFieldDecorator('description', {
                                        initialValue: detail.description,
                                        rules: [
                                            { required: true, whitespace: true, message: '请输入房屋介绍' },
                                        ],
                                        })(<Input.TextArea
                                        placeholder={'请输入房屋介绍'}
                                        disabled={actionType == 'check'}
                                        autoComplete={'off'}
                                        onChange={(e) => { updateModel(e.target.value, 'description', 'detail') }}
                                    />)}
                                </div>
                            </FormItem>
                        </Col>

                    </Row>
                    <Row style={{ borderBottom: "1px solid #EFF0F2" }}>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="联系人" labelCol={{ span: 5 }} >
                                <div className={cx('select-item-contain')}>
                                    {getFieldDecorator('contact', {
                                        initialValue: detail.contact,
                                        rules: [
                                            { required: true, whitespace: true, message: '请输联系人' },
                                        ],
                                        })(<Input
                                        placeholder={'请输入联系人'}
                                        disabled={actionType == 'check'}
                                        autoComplete={'off'}
                                        onChange={(e) => { updateModel(e.target.value, 'contact', 'detail') }}
                                    />)}
                                </div>
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="联系方式" labelCol={{ span: 5 }}>
                                <div className={cx('select-item-contain')}>
                                    {getFieldDecorator('mobile', {
                                        initialValue: detail.mobile,
                                        rules: [
                                            { required: true, whitespace: true, message: '请输入联系方式' },
                                        ],
                                        })(<Input
                                        placeholder={'请输入联系方式'}
                                        disabled={actionType == 'check'}
                                        autoComplete={'off'}
                                        type="number"
                                        onChange={(e) => { updateModel(e.target.value, 'mobile', 'detail') }}
                                    />)}
                                </div>
                            </FormItem>
                        </Col>

                    </Row>
                    <Row style={{ borderBottom: "1px solid #EFF0F2" }}>
                    <Col span={8}>
                        
                    <FormItem {...imageLayout} label="室内图片"
                                    style={{ marginLeft: "8.33333333%" }}>
                            <Uploader uploadedUrls ={images}
                                        removeFileCbf={(index)=>{removeImgUrl(index,'images')}}
                                        uploadSuccessCbf={ (imgUrl) => {updateImageModel(imgUrl, 'images')} }
                                        showType={actionType == 'check'?'4':'6'}
                                        fileType='image'
                                        fileMaxSize='0.5'
                                        minCropBoxWidth={1500}
                                        minCropBoxHeight={3000}
                                        maxFiles='4' />
                        </FormItem>
                    </Col>
                    <Col span={8}>
                        <FormItem {...imageLayout} label="户型图"
                                        style={{ marginLeft: "8.33333333%" }}>
                            <Uploader uploadedUrls ={houseTypeImage}
                                        removeFileCbf={(index)=>{removeImgUrl(index, 'houseTypeImage')}}
                                        uploadSuccessCbf={ (imgUrl) => {updateImageModel(imgUrl, 'houseTypeImage')} }
                                        showType={actionType == 'check'?'4':'6'}
                                        fileType='image'
                                        fileMaxSize='0.5'
                                        minCropBoxWidth={1500}
                                        minCropBoxHeight={3000}
                                        maxFiles='1' />
                        </FormItem>
                    </Col>
                    <Col span={8}>
                        <FormItem {...imageLayout} label="室外图"
                                            style={{ marginLeft: "8.33333333%" }}>
                                <Uploader uploadedUrls ={outerImage}
                                            removeFileCbf={(index)=>{removeImgUrl(index, 'outerImage')}}
                                            uploadSuccessCbf={ (imgUrl) => {updateImageModel(imgUrl, 'outerImage')} }
                                            showType={actionType == 'check'?'4':'6'}
                                            fileType='image'
                                            fileMaxSize='0.5'
                                            minCropBoxWidth={1500}
                                            minCropBoxHeight={3000}
                                            maxFiles='4' />
                        </FormItem>
                    </Col>
                </Row>
                </Form>
            </CollapsiblePanels>
        </div>

    )


}
export default connect(mapStateToProps)(Form.create()(routeView))

